<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <!--各种meta标签需要参考更多文档-->
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-title" content="demo"/>
    <title>demo</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="static/lib/jsoneditor/jsoneditor.min.css">
</head>

<body>

<header th:replace="base/head::header"></header>

<div class="tpl-page-container tpl-page-header-fixed">
    <div th:replace="base/head::menu('element')"></div>
    <!--内容-->
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            图表元素管理
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">数据大屏</a></li>
            <li class="am-active">图表元素组</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-server"></span> 图表元素组
                </div>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button type="button" class="am-btn am-btn-default am-btn-success"
                                    id="insertNewElement"><span
                                    class="am-icon-plus"></span> 新增
                            </button>
                        </div>
                    </div>
                </div>

                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" id="searchForName" placeholder="请输入元素组名称">
                        <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
                                    type="button" id="queryElementForName">
                            </button>
                        </span>
                    </div>
                </div>
            </div>

            <br/>

            <!-- 数据图片表格区 start -->
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4" id="multiplyImg" style="display: inline-block;width: 100%;">
            </div>
            <br/>
            <!-- 数据图片表格区 end -->

            <!-- 图片分页区-->
            <div style="float:right;">
                <ul id="page" data-am-widget="pagination"
                    class="am-pagination am-pagination-default">
                </ul>
            </div>

            <!-- 编辑元素分组 模态框 -->
            <div class="am-modal am-modal-no-btn am-modal-big" tabindex="-1" id="doc-modal-1">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">编辑元素分组
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                        <div class="tpl-block">
                            <div class="am-g">
                                <div class="tpl-form-body tpl-form-line">
                                    <form class="am-form tpl-form-line-form">
                                        <div class="am-form-group">
                                            <label for="groupName" class="am-u-sm-3 am-form-label">元素组名称</label>
                                            <div class="am-u-sm-9">
                                                <input type="text" class="tpl-form-input" id="groupName"
                                                       placeholder="请输入元素组名称">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">封面图</label>
                                            <div class="am-u-sm-9">
                                                <div class="am-form-group am-form-file">
                                                    <div class="tpl-form-file-img">
                                                        <img src="" id="imageId" alt="" class="list-show-img">
                                                    </div>
                                                    <button type="button" class="am-btn am-btn-danger am-btn-sm" style="float: left">
                                                        <i class="am-icon-cloud-upload"></i> 添加封面图片
                                                    </button>
                                                    <input id="form_imageFile" type="file" accept='image/*'
                                                           onchange="uploadImage();">
                                                </div>

                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="EditOrderNumber" class="am-u-sm-3 am-form-label">元素组顺序</label>
                                            <div class="am-u-sm-9">
                                                <input type="number" class="tpl-form-input" id="EditOrderNumber"
                                                       placeholder="请输入元素组顺序">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="list-img-button">
                                                <button type="button"
                                                        class="am-btn am-btn-primary tpl-btn-bg-color-success"
                                                        onclick="uploadData()">提交
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查看 元素按钮 模态框 -->
            <div class="am-modal am-modal-no-btn am-modal-big" tabindex="-1" id="queryElement">
                <div class="am-modal-dialog">
                        <div class="tpl-portlet-components">
                            <div class="portlet-title">
                                <div class="caption font-green bold">
                                    <span class="am-icon-server"></span> 图表元素
                                </div>
                                <div  align="right">
                                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                                </div>
                            </div>
                            <div class="am-g">
                                <div class="am-u-sm-12 am-u-md-6">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <button type="button" class="am-btn am-btn-default am-btn-success"
                                                    id="insertNewElementData"><span class="am-icon-plus"></span> 新增
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-3">
                                    <div class="am-input-group am-input-group-sm">
                                        <input type="text" class="am-form-field" id="searchForElementName"
                                               placeholder="请输入元素名称">
                                        <span class="am-input-group-btn">
                                        <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="button" id ="queryElementButton"> </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <!-- 元素图片表格区 start -->
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4" id="multiplyElement">
                            </div>
                            <br>
                            <!-- 元素图片表格区 end -->
                            <!-- 元素图片分页区-->
                            <div style="float:right;">
                                <ul id="pageElement" data-am-widget="pagination"
                                    class="am-pagination am-pagination-default">
                                </ul>
                            </div>
                        </div>
                </div>
            </div>

            <!-- 新增数据按钮 -->
            <div class="am-modal am-modal-no-btn am-modal-big" tabindex="-1" id="insertElement">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">新增元素分组
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                        <div class="tpl-block">
                            <div class="am-g">
                                <div class="tpl-form-body tpl-form-line">
                                    <form class="am-form tpl-form-line-form">
                                        <div class="am-form-group">
                                            <label for="groupNewName" class="am-u-sm-3 am-form-label">元素组名称</label>
                                            <div class="am-u-sm-9">
                                                <input type="text" class="tpl-form-input" id="groupNewName"
                                                       placeholder="请输入元素组名称">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">封面图</label>
                                            <div class="am-u-sm-9">
                                                <div class="am-form-group am-form-file">
                                                    <div class="tpl-form-file-img">
                                                        <img src="static/img/noPicture.png" id="imageNewId" alt="" class="list-show-img">
                                                    </div>
                                                    <button type="button" class="am-btn am-btn-danger am-btn-sm" style="float:left;">
                                                        <i class="am-icon-cloud-upload"></i> 添加封面图片
                                                    </button>
                                                    <input id="form_imageNewFile" type="file" accept='image/*'
                                                           onchange="uploadImage('insert');">
                                                </div>

                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="orderNumber" class="am-u-sm-3 am-form-label">元素组顺序</label>
                                            <div class="am-u-sm-9">
                                                <input type="number" class="tpl-form-input" id="orderNumber"
                                                       placeholder="请输入元素组顺序">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="list-img-button">
                                                <button type="button"
                                                        class="am-btn am-btn-primary tpl-btn-bg-color-success"
                                                        onclick="uploadData('insert')">保存
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 新增元素按钮 -->
            <div class="am-modal am-modal-no-btn am-modal-big" tabindex="-1" id="insertElementData">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">新增元素
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                        <div class="tpl-block">
                            <div class="am-g">
                                <div class="tpl-form-body tpl-form-line">
                                    <form class="am-form tpl-form-line-form">
                                        <div class="am-form-group">
                                            <label for="element_name" class="am-u-sm-3 am-form-label">元素名称</label>
                                            <div class="am-u-sm-9">
                                                <input type="text" class="tpl-form-input" id="element_name"
                                                       placeholder="请输入元素名称">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">封面图</label>
                                            <div class="am-u-sm-9">
                                                <div class="am-form-group am-form-file">
                                                    <div class="tpl-form-file-img">
                                                        <img src="static/img/noPicture.png" id="image_new_element" alt=""
                                                             class="list-show-img">
                                                    </div>
                                                    <button type="button" class="am-btn am-btn-danger am-btn-sm" style="float: left">
                                                        <i class="am-icon-cloud-upload"></i> 添加封面图片
                                                    </button>
                                                    <input id="image_new_file" type="file" accept='image/*'
                                                           onchange="uploadElementImage('insert');">
                                                </div>

                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">默认配置</label>
                                            <div class="am-u-sm-9">
                                                <div class="data_source" id="new_dataSource"></div>
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="list-img-button">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-secondary"
                                                        onclick="uploadElementData('insert')">
                                                    <span class="am-icon-save"></span> 保存
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 编辑元素按钮 模态框 -->
            <div class="am-modal am-modal-no-btn am-modal-big" tabindex="-1" id="editElementData">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">编辑元素
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd">
                        <div class="tpl-block">
                            <div class="am-g">
                                <div class="tpl-form-body tpl-form-line">
                                    <form class="am-form tpl-form-line-form">
                                        <div class="am-form-group">
                                            <label for="edit_element_name" class="am-u-sm-3 am-form-label">元素名称</label>
                                            <div class="am-u-sm-9">
                                                <input type="text" class="tpl-form-input" id="edit_element_name"
                                                       placeholder="请输入元素名称">
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">封面图</label>
                                            <div class="am-u-sm-9">
                                                <div class="am-form-group am-form-file">
                                                    <div class="tpl-form-file-img">
                                                        <img src="" id="image_edit_element" alt=""
                                                             class="list-show-img">
                                                    </div>
                                                    <button type="button" class="am-btn am-btn-danger am-btn-sm" style="float: left">
                                                        <i class="am-icon-cloud-upload"></i> 添加封面图片
                                                    </button>
                                                    <input id="image_edit_file" type="file" accept='image/*'
                                                           onchange="uploadElementImage();">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">默认配置</label>
                                            <div class="am-u-sm-9">
                                                <div class="data_source" id="data_source"></div>
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <div class="list-img-button">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-secondary"
                                                        onclick="uploadElementData()">
                                                    <span class="am-icon-save"></span> 保存
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<div th:replace="base/foot"></div>
<script type="text/javascript" src="static/lib/amazeui/page.js"></script>
<script src="static/lib/jsoneditor/jsoneditor.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="static/js/element.js"></script>
</body>

</html>